<template>
    <div class="Header">
        <h1>TodoList</h1>
        <div class="AddStyle">
            <input type="text" placeholder="请输入待办事项..." @keyup.enter="addtodo" v-model.trim="content">
            <button @click="addtodo">添加</button>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'

const emit = defineEmits(['add-todo'])
const content = ref('')

const addtodo = () => {
    if (content.value) {
        const todo = {
            id: uuidv4(),
            content: content.value,
            done: false,
        }
        emit('addTodo', todo)
        content.value = ''
    }
}
</script>
<style scoped>
.Header {
    height: 80px;
    background-color: #0b87ff;
    color: white;
    text-align: center;
    font-family: '宋体';
    font-weight: 700;
    font-size: 12px;
}

.AddStyle input {
    width: 300px;
    height: 30px;
    border-radius: 3px;
    border: none;
    margin-top: 10px;
    margin-right: 5px;
    outline: none;
    padding-left: 5px;
}

.AddStyle button {
    width: 80px;
    height: 30px;
    background-color: #eee;
    border-radius: 5px;
    border: none;
    color: #0b87ff;
    cursor: pointer;
}

.AddStyle button:hover {
    background-color: #ffffff;
    color: #f7b91d;
}
</style>